<template>
  <div>
    <Card>
      <div class="search-con search-con-top">
        <Input clearable placeholder="姓名" class="search-input" v-model="searchData.p_name" style="width:150px;"/>
        <Input clearable placeholder="身份证号" class="search-input" v-model="searchData.real_no" style="width:150px;"/>
        <Input clearable placeholder="卡号" class="search-input" v-model="searchData.cardNumber" style="width:150px;"/>
        <Input clearable placeholder="手机" class="search-input" v-model="searchData.tel" style="width:150px;"/>
        <Select v-model="searchData.is_auth" class="search-col" placeholder="是否实名" style="width:150px;">
            <Option v-for="(item,key) in is_authlist" :value="item.value" :key="`search-col-${key}`">{{ item.title }}</Option>
        </Select>
        <Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;查询</Button>
      </div>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete"/>
      <Page :total="totalSize" :page-size="searchData.pagesize" show-sizer style="text-align:right;padding-top:10px;" @on-page-size-change="changePagesize" @on-change="changePage"/>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { getUserlist, upvip } from '@/api/data'
import { getAuthkey } from '@/libs/util'
export default {
  name: 'userlist',
  components: {
    Tables
  },
  data () {
    return {
      is_authlist:[{title:'已实名', value: 1}, {title:'未实名', value: 0}],
      totalSize: 0,
      searchData:{
          p_name: '',
          real_no: '',
          tel: '',
          is_auth: '',
          pagesize: 10,
          currenpage:1
      },
      columns: [
        {title: '用户名', key: 'p_name', editable: false},
        /* {title: '朋友', key: 'friend'},
        {title: '朋友圈', key: 'friendcircle'}, */
        {
            title: '身份证', 
            key: 'real_no',
            render: (h,params) => {
                let tmdata = '';
                if(params.row.real_no){
                   tmdata = params.row.real_no.substring(0,4)+'******'+params.row.real_no.substring(params.row.real_no.length-4)
                }
                return h('div',[
                    h('span',tmdata)
                ])
            }
        },
        {title: '银行', key: 'bank_name'},
        {
            title: '信用卡号', 
            key: 'bank_no',
            render: (h,params) => {
                let tmdata = '';
                if(params.row.bank_no){
                   tmdata = params.row.bank_no.substring(0,4)+'******'+params.row.bank_no.substring(params.row.bank_no.length-4)
                }
                return h('div',[
                    h('span',tmdata)
                ])
            }
        },
        {
            title: '电话', 
            key: 'tel',
            render: (h,params) => {
                let tmdata = '';
                if(params.row.tel){
                   tmdata = params.row.tel.substring(0,3)+'******'+params.row.tel.substring(params.row.tel.length-3)
                }
                return h('div',[
                    h('span',tmdata)
                ])
            }
        },
        {
            title: '总余额', 
            key: 'all_balance',
            width: 100,
            render:(h,params) => {
                return h('div',[
                    h('span', '¥' + params.row.all_balance)
                ])
            }
        },
        {
            title: '可用余额', 
            key: 'now_balance',
            width: 100,
            render:(h,params) => {
                return h('div',[
                    h('span', '¥' + params.row.now_balance)
                ])
            }
        },
        {
            title: '实名', 
            key: 'is_auth',
            width: 80,
            render:(h,params) => {
                return h('div',[
                    h('span', {
                        style:{
                            color: params.row.is_auth===1? '#1BBC9D': '#D0672C'
                        }
                    }, params.row.is_auth===1? '是': '否')
                ])
            }
        },
        {
            title: 'vip', 
            key: 'ext',
            width: 80,
            render:(h,params) => {
                return h('div',[
                    h('span', {
                        style:{
                            color: params.row.ext? '#1BBC9D': '#D0672C'
                        }
                    }, params.row.ext? '是': '否')
                ])
            }
        },
        {
            title: '邀请码',
            key: 'regcode',
            width: 90,
            render: (h,params) => {
                return h('div',[
                    h('span',params.row.regcode?params.row.regcode:'-')
                ])
            }
        },
        {
            title: '注册时间', 
            key: 'create_time',
            width: 150
        },
        {
          title: '操作',
          key: 'handle',
          width: 100,
          button: [
            (h, params, vm) => {
              return h('div', {
                style: {
                    marginTop: '5px',
                    marginBottom: '5px'
                },
                on: {
                  'click': () => {
                     this.$router.push(`user/${params.row.uid}`);
                  }
                }
              }, [
                h('Button', '详情')
              ])
            },
            (h, params, vm) => {
                if(!params.row.ext){
                    return h('Poptip', {
                        props: {
                            confirm: true,
                            title: '你确定要升级当前用户为vip吗?'
                        },
                        on: {
                            'on-ok': () => {
                                this.changeuserToVip(params.row.uid)
                            }
                        }
                    }, [
                        h('Button', '升级vip')
                    ])
                }
            },
          ]
        }
      ],
      tableData: []
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    handleSearch (){
        const data = {
            auth_key: getAuthkey(),
            page: this.searchData.currenpage, 
            limit: this.searchData.pagesize,
            real_no: this.searchData.real_no,
            p_name: this.searchData.p_name,
            is_auth: this.searchData.is_auth,
            tel: this.searchData.tel
        }
        getUserlist(data).then(res => {
            if(res.data.code !== 200){
                this.$Message.error(res.data.error)
                return
            }
            this.totalSize = res.data.data.dataCount;
            this.tableData = res.data.data.list;
        },err => {
            this.$Message.error(err? err: '网络错误');
        })
    },
    changeuserToVip (uid){
        let data = {
            auth_key: getAuthkey(),
            uid: uid
        }
        upvip(data).then(res => {
            this.$Message.success(res.data.error? res.data.error: res.data.data)
            this.handleSearch()
        }, err => {
            this.$Message.error(err? err: '网络错误');
        })
    },
    changePagesize (size){
        this.$set(this.searchData, 'pagesize', size);
        this.handleSearch()
    },
    changePage (page){
        this.$set(this.searchData, 'currenpage', page);
        this.handleSearch()
    }
  },
  mounted () {
    this.handleSearch()
  }
}
</script>

<style>
    .search-input{
        width: 150px;
    }
</style>
